<!--登录页面-->
<template>
    <div class='login-view'>
        <div class="container">
            <el-carousel trigger="click" height="420px">
                <el-carousel-item v-for="item in swiperDatas" :key="item.id">
                    <img :src="item.imgURL" alt="">
                </el-carousel-item>
            </el-carousel>
            <div class="login-form">
                <div class="title">
                    <img src="@/assets/images/logo.png" alt="" width="50px">
                    <h4>商创后台管理系统</h4>
                </div>
                <el-form :model="LoginForm" :rules="LoginRules" ref="LoginForm" label-width="100px"
                    class="login-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="LoginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="LoginForm.password" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="captcha" class="item-captcha">
                        <el-input v-model="LoginForm.captcha" placeholder="请输入验证码"></el-input>
                        <div class="captcha" v-html="captcha" @click="changeCapcha"></div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('LoginForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { GetCaptchaApi, UserLoginApi } from '@/api/login'
import { setToken } from '@/utils/auth'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            swiperDatas: [
                { id: 1, imgURL: require('@/assets/images/sw1.jpg') },
                { id: 2, imgURL: require('@/assets/images/sw2.jpg') },
                { id: 3, imgURL: require('@/assets/images/logo.png') }
            ],
            LoginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            captcha: '',
            client: '',
            LoginRules: {
                // required:必须填入
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入与密码', trigger: 'blur' }
                ],
                captcha: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
            }
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        submit() {
            this.$router.push('/admin');
        },
        getCaptcha() {
            GetCaptchaApi().then((res) => {
                console.log(res.data);
                this.captcha = res.data.captcha;
                this.client = res.data.client;

            })
        },
        // 改变验证码
        changeCapcha() {
            this.getCaptcha()
        },
        // 添加提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 添加client相关信息
                    this.LoginForm.client = this.client;
                    UserLoginApi(this.LoginForm).then(res => {
                        if (res.data.status == 200) {
                            // 跳转登录页面
                            this.$router.push('/admin');
                            // 设置到cookie中
                            setToken(res.data.token);
                        } else {
                            this.$message(res.data.msg);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getCaptcha()
    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，激活
    deactivated() { }, //如果页面有keep-alive缓存功能，非激活
}
</script>
<style lang="less">
.login-view {
    width: 100%;
    height: 100%;
    // 脱离标准流定位四方位为0,空间这个沾满
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('@/assets/images/bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .container {
        width: 1020px;
        height: 420px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        display: flex;

        .el-carousel {
            width: 510px;
            height: 420px;
        }

        .login-form {
            width: 510px;
            height: 420px;
            padding-right: 20px;
            box-sizing: border-box;

            .title {
                display: flex;
                height: 100px;
                justify-content: center;
                align-items: center;
            }

            .item-captcha {
                .el-form-item__content {
                    display: flex;
                    align-items: center;
                }
            }

            .el-form-item__content {
                .el-button {
                    width: 100%;
                }
            }
        }


    }
}
</style>